<template>
	<div class="line123">
		<div id="line123" class="" style="width: 100%;height:550px;"></div>
	</div>
</template>

<script>
	import echarts from 'echarts/lib/echarts';
	// 引入柱状图
	import 'echarts/lib/chart/bar';
	import 'echarts/lib/chart/line';
	import 'echarts/lib/component/title';
	import 'echarts/lib/component/legend';
	import 'echarts/lib/component/toolbox';
	import 'echarts/lib/component/markPoint';
	import 'echarts/lib/component/tooltip';
	import 'echarts/lib/component/datazoom';
	import 'echarts/lib/component/markPoint';
	// import 'echarts/lib/component/timeline';
	export default {
		mounted() {
			this.myChart = echarts.init(document.getElementById('line123'));
			this.initData();
			
			console.log('echart_data!!!!!!!!!', this.echart_data)
		},
		props: ['series', 'echart_data','selected','legenddata'],
		methods: {
			initData() {
				const option = {
					title : {
					    text: '交易柜台速度比对',
					    subtext: '',
					    x:'center'
					},
					backgroundColor:'rgba(255,255,255,1)',
					grid: [{
							left: '5%',
							right: '5%',
							top: '36%',
							height: '57%'
						},

					],

					tooltip: {
						// trigger: 'axis',
						formatter: "{c0}<br>{a}<br>{b}"
					},
					legend: {
                        // orient: 'vertical',
                        // left: 'left',
						top:'6%',
						selected:this.selected,
						// data:this.legenddata,
                    },
					xAxis: [{
						type: 'category',
						boundaryGap: ['2%', '2%'],
						// data: this.echart_point,
						data: this.echart_data['time1'],

					}, ],
					dataZoom: [{
						type: 'slider',
						show: true,
						start: 0,
						end: 100,
						bottom: '0%',
						xAxisIndex: [0, ]
					}],
					yAxis: [{
							name: '纳秒(ns)',
							type: 'value',
							position:'right',
							min: 'dataMin',
							max: 'dataMax',
							
						},{
							name: '',
							type: 'value',
							position:'left',
							min: 'dataMin',
							max: 'dataMax',
							
						},
						

					],
					series: this.series,
				};
				this.myChart.clear();
				
				this.myChart.setOption(option);
			
			}
		},
		watch: {
			series: function() {
				this.initData()
				// console.log(this.series, 'series')
			},
			echart_data: function() {
				this.initData()
				
				//console.log(this.echart_data, 'echart_data')
			},
			selected: function() {
				this.initData()
				//console.log(this.echart_data, 'echart_data')
			},
			
			legenddata: function() {
				this.initData()
				// console.log(this.echart_data, 'legenddata')s
			},
			
		}
	}
</script>

<style>
	.line1 {
		display: flex;
		justify-content: center;
	}
</style>
